<template>
    <div>
        <h1>待办事项</h1>
        <div class="common-layout">
            <el-container>
                <el-header><SonHeader @add="addHandle"/></el-header>
                <el-main><SonMain :list="list" @changeD="changeHandle" @del="delHandle"/></el-main>
                <el-footer><SonFooter :list="list" @show="showHandle" /></el-footer>
            </el-container>
        </div>
    </div>
</template>

<script>
import SonFooter from '@/components/ToDo/SonFooter.vue';
import SonHeader from '@/components/ToDo/SonHeader.vue';
import SonMain from '@/components/ToDo/SonMain.vue';

export default {
    components:{
        SonHeader,
        SonMain,
        SonFooter,
    },
    created(){
        this.copyList = this.list.slice() //创建一个中间数组，用来处理一些过程数据的转换
    },//生命周期钩子函数，表示页面在创建时将执行的代码
    data(){
        return{
            list:[
                    {
                        id: '001',
                        content: '完成第一章学习',
                        startDate: '2024.10.29',
                        finishData:'',
                        state:false
                    },
                    {
                        id: '002',
                        content: '完成第二章学习',
                        startDate: '2024.10.29',
                        finishData:'',
                        state:false
                    },
                    
                ],
            now:new Date(),
            copyList:[]
        }
    },
    methods:{
        addHandle(val){
            //通过数组方法push，把数据都插入到数组的末尾
            this.list.push({id:+new Date(),
                            content:val,
                            startDate:this.fomateDate,
                            finishData:'',
                            state:false
            })
            this.copyList = this.list.slice() //当数组发生更改的时候，中间数组也需要同步进行更改，下面方法同理
        },
        changeHandle(i){
            this.list[i].finishData=this.fomateDate
            this.copyList = this.list.slice()
        },
        delHandle(i){
            //删除传递过来的下标所对应的行
            this.list.splice(i,1)
            this.copyList = this.list.slice()
        },
        showHandle(v){
            if(v=='all'){
                this.list = this.copyList.slice()
            }else if(v == 'done'){
                this.list = this.copyList.filter(v=> v.state == true) //过滤方法，把符合要求的数据筛选出来
            }else if(v=='undo'){
                this.list = this.copyList.filter(v=> v.state == false) //过滤方法，把符合要求的数据筛选出来
            }else{
                this.list = [],
                this.copyList = []
            }
        }
    },
    computed:{
        fomateDate(){
            let month = this.now.getMonth() + 1
            return this.now.getFullYear() + '-' + month + '-' + this.now.getDate()
        }
    }
}
</script>

<style>
 /* scoped 限制当前样式作用在当前页面，否则，如果有相同的样式名，将会影响其他页面*/
#app{
    width: 800px;
    margin: auto;
}
</style>
